<!--ta-tree示例-->
<template>
    <div>
        <ta-input @change="onChange" placeholder="Search" style="margin-bottom: 8px"/>
        <ta-tree
                :autoExpandParent="autoExpandParent"
                :expandedKeys="expandedKeys"
                :treeData="gData"
                @expand="onExpand"
        >
            <template slot="title" slot-scope="{title}">
                <span v-if="title.indexOf(searchValue) > -1">
                    {{title.substr(0, title.indexOf(searchValue))}}
                    <span style="color: #f50">{{searchValue}}</span>
                    {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
                </span>
                <span v-else>{{title}}</span>
            </template>
        </ta-tree>
    </div>
</template>

<script>
  const x = 3
  const y = 2
  const z = 1
  const gData = []

  const generateData = (_level, _preKey, _tns) => {
    const preKey = _preKey || '0'
    const tns = _tns || gData

    const children = []
    for (let i = 0; i < x; i++) {
      const key = `${preKey}-${i}`
      tns.push({ title: key, key, scopedSlots: { title: 'title' } })
      if (i < y) {
        children.push(key)
      }
    }
    if (_level < 0) {
      return tns
    }
    const level = _level - 1
    children.forEach((key, index) => {
      tns[index].children = []
      return generateData(level, key, tns[index].children)
    })
  }
  generateData(z)

  const dataList = []
  const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i]
      const key = node.key
      dataList.push({ key, title: key })
      if (node.children) {
        generateList(node.children, node.key)
      }
    }
  }
  generateList(gData)

  const getParentKey = (key, tree) => {
    let parentKey
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i]
      if (node.children) {
        if (node.children.some(item => item.key === key)) {
          parentKey = node.key
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children)
        }
      }
    }
    return parentKey
  }
  export default {
    data () {
      return {
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        gData
      }
    },
    methods: {
      onExpand (expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onChange (e) {
        const value = e.target.value
        const expandedKeys = dataList.map((item) => {
          if (item.key.indexOf(value) > -1) {
            return getParentKey(item.key, gData)
          }
          return null
        }).filter((item, i, self) => item && self.indexOf(item) === i)
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true
        })
      }
    }
  }
</script>
